var numLoaded = 0;
var soundLineImg = new Image();
//在页面加载时进行舞台搭建及资源加载
window.onload = function() {
    //创建Kinetic舞台，绑定我们添加的<div>容器
    var stage = new Kinetic.Stage({
        container : "container", //<div>的id
        width : 800, //创建的舞台宽度
        height : 450 //创建的舞台高度
        });   
    var layer = new Kinetic.Layer();
    //编辑辅助创建边框
    var bord = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 800,
        height: 450,
        stroke: 'red',
        strokeWidth: 2
    });
    
    layer.add(bord);
    //载入资源
    
    //图片
    soundLineImg.onload = function() {
        if(isLoaded()){
            drawElement(stage, layer);
        }
    };
    soundLineImg.src = './img/SoundLine.png';
}

//判断资源是否加载完毕
function isLoaded() {
    numLoaded++;
    if (numLoaded >= 1){
        return true;
    }
    return false;
}

//绘制
function drawElement(stage, layer) {
    var Beams = new Array(20);
    for (var i = 0; i < Beams.length; i++) {
        Beams[i] = SoundLine.createNew([400, 225], i * 18, soundLineImg);
        layer.add(Beams[i]);
        Beams[i].runAway(layer);
    }
    // var testline = SoundLine.createNew([400, 200], 30, soundLineImg);
    // testline.runAway(layer);
    // layer.add(testline);
    stage.add(layer);
}